<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	<title>用户登录</title>
	<style>
		label{
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<!-- header.jsp -->
	<jsp:include page="../header.jsp"></jsp:include>
	<!-- /header.jsp -->

	<!-- SECTION -->
	<div class="section" id="section" style="width:100%;height: 480px">
		<!-- container -->
		<div class="container">
			<!-- row -->
			<div class="row">
				<div class="col-md-12">
					<!-- Billing Details -->
					<div class="billing-details">
						<div class="col-md-7"></div>
						<div class="col-md-5">
							<div style="width: 100%;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:4%;background:#fff;opacity: 0.8">
								<font>用户登录</font> USER LOGIN <span style="color:red;">${msg}</span>
								<div>&nbsp;</div>
								<form class="form-horizontal" method="post" action="${pageContext.request.contextPath}/user">
									<input type="hidden" name="method" value="login">
									<div class="form-group">
										<div class="col-sm-2">
											<label class="control-label">
												电话：
											</label>
										</div>
										<div class="col-sm-6">
											<input class="input" type="tel" name="tel" placeholder="电话号码" pattern="1[3456789]\d{9}" required>
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-2">
											<label class="control-label">
												密码：
											</label>
										</div>
										<div class="col-sm-6">
											<input class="input" type="password" name="pwd" placeholder="登录密码" required>
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-2">
											<label class="control-label">
												验证码：
											</label>
										</div>
										<div class="col-sm-3">
											<input class="input" type="text" name="code" placeholder="验证码" required>
										</div>
										<div class="col-sm-3">
											<img id="codeImg" src="${pageContext.request.contextPath}/VerifyCode" title="看不清，请点击刷新验证码" onclick="flushCodeImg($(this))">
										</div>
									</div>

									<div class="form-group">
										<div class="col-sm-2">
											<label class="control-label">
											</label>
										</div>
										<div class="col-sm-6" style="white-space: nowrap;">
											<button class="btn btn-danger" type="submit">登录</button>
											<a href="${pageContext.request.contextPath}/user?method=registerPage">
												<button class="btn btn-link" type="button">
													没有账号？
												</button>
											</a>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
					<!-- /Billing Details -->
				</div>
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</div>
	<!-- /SECTION -->

	<!-- footer.jsp -->
	<jsp:include page="../footer.jsp"></jsp:include>
	<!-- /footer.jsp -->

	<script>
		$(document).ready(function () {
			// 背景轮播图
			$('#section').backstretch([
				"${pageContext.request.contextPath}/asserts/reception/img/loginbg.jpg",
				"${pageContext.request.contextPath}/asserts/reception/img/loginbg1.jpg",
				"${pageContext.request.contextPath}/asserts/reception/img/loginbg2.jpg",
				"${pageContext.request.contextPath}/asserts/reception/img/loginbg3.jpg"
			],{
				fade:1*1000,
				duration: 3*1000
			});
		});
		$(window).resize(function () {
			$('#section').backstretch("resize");
		});
	</script>
</body>
</html>
